<template>
	<view class="page">
		<u-navbar title="邀请有奖"></u-navbar>
		<view class="invite">
			<image class="bg"
				src="https://img.50api.cn/vx.tongbayun.v3/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20230308153946.png"
				mode="widthFix"></image>
			<view class="invite-earnings">
				<view class="earnings-list">
					<view class="earnings-list-text">当前收益</view>
					<view class="earnings-list-price">{{ userInfo.team_income_sum}}<text>元</text></view>
					<view class="earnings-list-btn" @click="$.to('/pagesA/pages/my/currency?sta=1')">查看详情 <u-icon
							name="arrow-right" size="22"></u-icon>
					</view>
				</view>
				<view class="earnings-list">
					<view class="earnings-list-text">可提现收益</view>
					<view class="earnings-list-price">{{ userInfo.balance }}<text>元</text></view>
					<view class="earnings-list-btn" @click="$.to('/pagesA/pages/my/currency?sta=1')">查看详情 <u-icon
							name="arrow-right" size="22"></u-icon>
					</view>
				</view>
				<view class="earnings-list">
					<view class="earnings-list-text">已邀请</view>
					<view class="earnings-list-price" style="color: #000;">{{ userInfo.xj_count }}<text>人</text></view>
					<view class="earnings-list-btn" @click="$.to('/pagesA/pages/my/myTeam')">查看详情 <u-icon
							name="arrow-right" size="22"></u-icon>
					</view>
				</view>
			</view>
			<view class="invite-step">
				<image src="https://img.50api.cn/vx.tongbayun.v3/invite4.png" mode="widthFix"></image>
			</view>
			<view class="blackBg" v-show="yaoShow">
				<view class="appfx">
					<view class="appfx-content">
						<view class="content-title">
							分享
						</view>
						<view class="content-img">	
								<image src="https://img.50api.cn/vx.tongbayun.v3/invite5.png" mode=""
									@click="appShare('WXSceneSession')"></image>
						</view>
					</view>
					<view class="appfx-close" @click="yaoShow = false">取消</view>
				</view>				
			</view>
		</view>
		<view class="btn-ground">
			<view class="btn-ground-left" @click="$.to('/pagesA/pages/my/currency?sta=1')">立即提现</view>
			<!-- #ifdef APP-PLUS -->
			<view class="btn-ground-right" @click="yaoShow = true">立即邀请</view>
			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN -->
			<view class="btn-ground-right" @click="show = true">立即邀请</view>
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<view class="list" @click="copy">
				<view class="btn-ground-right" @click="copy">复制链接</view>
			</view>
			<!-- #endif -->
		</view>
		<u-popup v-model="show" mode="bottom" border-radius="14">
			<view class="invite-model">
				<view class="invite-model-content">
					<view class="content-title">
						分享
					</view>
					<view class="content-img">
						<!-- #ifdef MP-WEIXIN -->
						<button class="share-btn" open-type="share">
							<image src="https://img.50api.cn/vx.tongbayun.v3/invite5.png" mode=""
								@click="onShareAppMessage"></image>
						</button>
						<image src="https://img.50api.cn/vx.tongbayun.v3/invite6.png" mode="" @click="sharePoster">
						</image>
						<view class="WechatSkip" @click="WechatSkip">复制链接</view>
						<!-- #endif -->


						<!-- #ifdef APP-PLUS -->
						<image src="https://img.50api.cn/vx.tongbayun.v3/invite5.png" mode=""
							@click="appShare('WXSceneSession')"></image>
						<!-- <image src="https://img.50api.cn/vx.tongbayun.v3/invite6.png" mode="" @click="sharePoster">
						</image> -->
						<!-- #endif -->
					</view>
				</view>
				<view class="invite-model-close" @click="show = false">取消</view>
			</view>
		</u-popup>

		<u-popup v-model="showPoster" mode="center" background="transparent">
			<view class="poster-box">
				<view style="width: 500rpx;">
					<image :src="posterImage" class="image" mode="widthFix" />
				</view>
				<view class="btn-share">
					<view class="button" @tap="saveImage">保存海报</view>
					<view class="button" @tap="showPoster=false">关闭海报</view>
				</view>

			</view>
		</u-popup>
		<PosterCanvas ref="childCanvas" @handleSuccess='canvasSuccess' :shareUrl="codeShareUrl" :appShareUrl="appShareUrl"/>
	</view>
</template>

<script>
	import {
		saveImageToPhotosAlbum
	} from '@/uni_modules/sakura-canvas/js_sdk/utils/util'
	import PosterCanvas from '@/components/PosterCanvas.vue'
	export default {
		components: {
			PosterCanvas
		},
		data() {
			return {
				share_ma: '',
				url: '',
				share_bg: '',
				userInfo: null,
				show: false,
				showPoster: false,
				posterImage: '',
				codeShareUrl: '', // 小程序二维码
				appShareUrl : '' , // app分享
				yaoShow:false,
				openlink:''
			}
		},
		onLoad() {
			if (!uni.getStorageSync("user")) {
				uni.redirectTo({
					url: '/pages/my/login'
				})
			} else {
				this.share_ma = uni.getStorageSync("user").share_ma
				this.appShareUrl = `https://v33.50app.cn/index/index/reg?share_ma=${this.share_ma}`
			}
			this.get_share_data();
			this.get_poster()
			// this.getwxacod()''
		},
		onShow() {
			this.getUser()
		},
		methods: {
			isShow(){
				this.$refs.popup.open('top')
				// this.show = true
			},
			getwxacod() {
				this.$http({
					url: "https://api.weixin.qq.com/wxa/getwxacode?access_token=ACCESS_TOKENl",
				}).then(res => {

				})
			},
			get_share_data() {
				this.$http({
					url: "api/common/get_general",
				}).then(res => {
					console.log(res);
					if (res.data.code == 1) {
						this.url = res.data.data.h5_url
						// this.share_bg = res.data.data.share_bg
						this.shareUrl = '/pages/my/login?share_ma=' + this.share_ma
					}
				}).catch(err => {});
			},
			WechatSkip(){
				if (this.url == "") {
					this.$tip.tip("出错了，请稍后再试")
					return
				}
				console.log(this.url);
				let dizhi = decodeURIComponent(this.url + '/#/pages/tabBar/h5Link?share_ma=' + this.share_ma)
				uni.setClipboardData({
					data: dizhi,
					success: () => {
					}
				});
			},
			// 复制链接
			copy() {
				if (this.url == "") {
					this.$tip.tip("出错了，请稍后再试")
					return
				}
				let dizhi = decodeURIComponent(this.url + '/#/?share_ma=' + this.share_ma)
				uni.setClipboardData({
					data: dizhi,
					success: () => {

					}
				});

			},
			appShare(scene) {
				if (this.url == "") {
					this.$tip.tip("出错了，请稍后再试")
					return
				}
				let dizhi = decodeURIComponent(this.url + '/#/?share_ma=' + this.share_ma)
				uni.share({
					provider: "weixin", //分享服务提供商（即weixin|qq|sinaweibo）
					scene: scene, //场景，可取值参考下面说明。
					type: 0, //分享形式
					href: dizhi,
					title: '邀你一起开盲盒~',
					imageUrl: 'https://img.50api.cn/dingdang/share.png', //图片地址
					success: (res) => {
						this.show = false //成功后关闭底部弹框
					},
					fail: (err) => {
						uni.showToast({
							title: '分享失败',
							icon: 'none',
							duration: 2000
						})
						this.show = false
					}
				});
			},

			// 获取小程序二维码
			get_poster() {
				this.$http({
					url: 'api/member/get_wxamp_share_qrcode'
				}).then(res => {
					if (res.data.code == 1) {
						this.codeShareUrl = res.data.data.qecode
						console.log(this.codeShareUrl, '22')
					}
					// this.codeShareUrl 
				})
			},
			getUser() {
				this.$http({
					url: "api/member/get_user_info",
				}).then(res => {
					console.log(res);
					if (res.data.code == 1) {
						this.userInfo = res.data.data.member
					}
				}).catch(err => {});
			},
			sharePoster() {
				this.show = false
				// console.log(this.$refs.childCanvas,'this.$refs.childCanvas');
				this.$refs.childCanvas.drawPoster()
			},
			canvasSuccess(param) {
				const {
					showPoster,
					posterImage
				} = param
				this.showPoster = showPoster
				this.posterImage = posterImage
			},
			onShareAppMessage(res) {
				if (res.from === 'button') { // 来自页面内分享按钮
					console.log(res.target)
				}
				return {
					title: '邀请好友得豪礼',
					path: '/pages/tabBar/home?share_ma=' + this.share_ma
				}
			},
			async saveImage() {
				// #ifdef H5
				uni.showToast({
					title: 'H5不支持API保存图片,请使用长按保存!!!',
					icon: 'none'
				})
				return
				// #endif
				const res = await saveImageToPhotosAlbum(this.posterImage)
				if (!res.success) {
					uni.showToast({
						title: '保存图片失败!!!',
						icon: 'none'
					})
					return
				}
				this.showPoster = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.invite {
		width: 100%;
		position: relative;
		.blackBg{
			position: fixed;
			left: 0;
			right: 0;
			top: 0;
			height: 100vh;
			background-color: rgba(0, 0, 0, 0.5);
			z-index: 50;
			.appfx{
				height: 500rpx;
				background-color:#fff;
				position: absolute;
				top: 50%;
				left: 50%;
				border-radius: 10px;
				transform: translate(-50%,-50%);
				padding-bottom: constant(safe-area-inset-bottom);
				padding-bottom: env(safe-area-inset-bottom);
				.appfx-content{
					height: 380rpx;
					width: 100%;
					box-sizing: border-box;
					display: flex;
					flex-direction: column;
					// justify-content: center;
					align-items: center;
					.content-title{
						background: rgb(225, 155, 110);
						background: linear-gradient(0deg, rgba(225, 155, 110, 1) 0%, rgba(242, 117, 71, 1) 100%);
						border-radius: 10px;
						width: 200rpx;
						height: 60rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						color: #fff;
						margin-top: 30rpx;
					}
					.content-img{
						width: 690rpx;
						display: flex;
						justify-content: space-around;
						margin-top: 50rpx;
						image {
							width: 200rpx;
							height: 200rpx;
						}
					}
				}
				.appfx-close{
					text-align: center;
					height: 100rpx;
					width: 100%;
				}
			}
		}
		.bg {
			width: 100%;
			position: absolute;
			top: 0;
			z-index: 1;
		}

		&-earnings {
			position: absolute;
			width: 690rpx;
			height: 200rpx;
			left: 30rpx;
			box-sizing: border-box;
			// background-color: red;
			top: 0;
			z-index: 9;
			margin-top: 1250rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;
		}

		.earnings-list {
			text-align: center;

			&-text {
				font-size: 22rpx;
				color: #888;
			}

			&-price {
				color: #FE7D57;
				font-size: 36rpx;
				font-weight: bold;
				margin-top: 20rpx;

				text {
					font-size: 26rpx;
					margin-left: 6rpx;
					font-weight: normal;
				}
			}

			&-btn {
				color: #FE7D57;
				font-size: 22rpx;
				margin-top: 30rpx;
				width: 140rpx;
				height: 40rpx;
				line-height: 40rpx;
				text-align: center;
				background-color: rgba(255, 160, 122, .4);
				border-radius: 20rpx;
			}

		}

		.invite-step {
			position: absolute;
			width: 690rpx;
			height: 200rpx;
			left: 30rpx;
			box-sizing: border-box;
			top: 0;
			z-index: 9;
			margin-top: 1620rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;

			image {
				width: 100%;
			}
		}

	}
	.WechatSkip{
		width: 100rpx;
		height: 100rpx;
		line-height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 20rpx;
		background: rgb(225, 155, 110);
		background: linear-gradient(0deg, rgba(225, 155, 110, 1) 0%, rgba(242, 117, 71, 1) 100%);
		border-radius: 50%;
		margin-top: 30rpx;
		color: #fff;
	}
	.btn-ground {
		height: calc(100rpx + constant(safe-area-inset-bottom));
		height: calc(100rpx + env(safe-area-inset-bottom));
		width: 690rpx;
		position: fixed;
		bottom: 0;
		z-index: 10;
		left: 30rpx;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		display: flex;
		justify-content: space-between;
		align-items: center;

		&-left,
		&-right {
			width: 330rpx;
			height: 100rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 34rpx;
			font-weight: bold;
		}

		&-left {
			background: rgb(247, 205, 186);
			background: linear-gradient(0deg, rgba(247, 205, 186, 1) 0%, rgba(253, 248, 241, 1) 100%);
			border-radius: 10px;
			color: #FE7D57;
		}

		&-right {
			background: rgb(225, 155, 110);
			background: linear-gradient(0deg, rgba(225, 155, 110, 1) 0%, rgba(242, 117, 71, 1) 100%);
			border-radius: 10px;
			color: #fff;
		}
	}

	.invite-model {
		height: 500rpx;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);

		.invite-model-content {
			height: 380rpx;
			width: 100%;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			// justify-content: center;
			align-items: center;
		}

		.invite-model-close {
			text-align: center;
			height: 100rpx;
			width: 100%;

		}

		.content-title {
			background: rgb(225, 155, 110);
			background: linear-gradient(0deg, rgba(225, 155, 110, 1) 0%, rgba(242, 117, 71, 1) 100%);
			border-radius: 10px;
			width: 200rpx;
			height: 60rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;
			margin-top: 30rpx;
		}

		.content-img {
			width: 690rpx;
			display: flex;
			justify-content: space-around;
			margin-top: 50rpx;

			image {
				width: 200rpx;
				height: 200rpx;
			}
		}
	}

	.poster-box {
		width: 600rpx;

		.btn-share {
			display: flex;
			justify-content: space-between;
			box-sizing: border-box;
			padding: 20rpx 80rpx;

			.button {
				background: #845EC2;
				padding: 0 30rpx;
				height: 70rpx;
				font-size: 26rpx;
				color: #fff;
				border-radius: 30rpx;
				text-align: center;
				line-height: 70rpx;
			}
		}
	}

	.share-btn {
		background-color: #fff;
		margin: 0;
		padding: 0;
	}

	.share-btn::after {
		border: none;
	}
</style>
